import React from 'react'
import {Button,Modal ,Table,Tag,Popover,Switch} from 'antd'
import {DeleteOutlined,EditOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import {useState,useEffect} from 'react'
import axios from 'axios'
// import { Switch } from 'react-router'
const { confirm } = Modal;
export default function RightList() {
    const [dataSource, setdataSource] = useState([])

    useEffect(()=>{
        axios.get("/rights?_embed=children").then(res=>{
            const list=res.data;
            list.forEach(item=>{
                if(item.children.length===0){
                    item.children='';
                }
            })
            setdataSource(list);
        })
    },[])

    const confirmMethods=(item)=>{
        confirm({
            title: '您确定要删除吗？',
            icon: <ExclamationCircleOutlined />,
            content: 'Some descriptions',
        
            onOk() {
                deleteMethod(item);
            },
        
            onCancel() {
              
            },
          });
    }
    //删除菜单项
    const deleteMethod =(item)=>{
        // 过滤掉要删除的项目
        if(item.grade===1){
            setdataSource(dataSource.filter(data=>{
                return data.id!==item.id;
            }))
            axios.delete(`/rights/${item.id}`)
        }else{
            console.log(item.rightId);
            let list = dataSource.filter(data=>data.id===item.rightId);
            list[0].children=list[0].children.filter(data=>data.id!==item.id);
            setdataSource(list);
            axios.delete(`/children/${item.id}`)
        }
    }

    // 改变菜单开关状态
    const switchMethod=(item)=>{
        var pagepermissonSwitch='';
        if(item.pagepermisson===1){
            pagepermissonSwitch=0;
        }else{
            pagepermissonSwitch=1;
        }
        if(item.grade===1){  
            axios.patch(`/rights/${item.id}`,{
                pagepermisson:pagepermissonSwitch
            })
            axios.get("/rights?_embed=children").then(res=>{
            setdataSource(res.data);
        })
        }else{
            axios.patch(`/children/${item.id}`,{
                pagepermisson:pagepermissonSwitch
            })
            axios.get("/rights?_embed=children").then(res=>{
            setdataSource(res.data);
        })
        }
    }
      
      const columns = [
        {
            // 列表标题
          title: 'ID',
        //   列表内容名称
          dataIndex: 'id',
          render:(id)=>{
              return <b>{id}</b>
          }
        },
        {
          title: '权限名称',
          dataIndex: 'title',
        },
        {
          title: '权限路径',
          dataIndex: 'key',
          render:(key)=>{
              return <Tag color="geekblue">{key}</Tag>
          }
        },
        {
            title:'操作',
            render:(item)=>{
                return (
                    <div>
                        {/* 删除按钮 */}
                        <Button danger shape="circle" icon={<DeleteOutlined />}
                        onClick={()=>confirmMethods(item)} className='rightMargin'></Button>
                        {/* 修改按钮 */}
                        <Popover content={
                            <div style={{textAlign:"center"}}>
                                <Switch checked={item.pagepermisson} onClick={()=>switchMethod(item)}></Switch>
                            </div>
                        } trigger={
                            item.pagepermisson===undefined?'':'click'
                        } title="页面配置项">
                            <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={item.pagepermisson===undefined}></Button>
                        </Popover>
                    </div>
                )
            }
        }
      ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} 
            rowKey={(item)=>item.id}
            pagination={{
                pageSize:6
            }}/>
        </div>
    )
}
